<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Frontend</title>
</head>
<body>
    <h1>Flask API 测试页面</h1>
    <button id="checkStatus">检查服务状态</button>
    <p id="response"></p>

    <script>
        document.getElementById('checkStatus').addEventListener('click', () => {
            fetch('http://localhost:1414/status') // 请求后端
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('response').innerText = `服务状态：${data.status}, 消息：${data.message}`;
                })
                .catch(error => {
                    document.getElementById('response').innerText = `请求失败：${error}`;
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</html>
